const inputEl = document.querySelector('.input1')
const inputDivEl = document.querySelector('.navigation-input')
const buttonEl1 = document.querySelector('.navigation-button1')
const navEl = document.querySelector('.navigation-outer')
const leftInEl = document.querySelector('.left-in')
const leftaEl = document.querySelectorAll('.left-in a')
const imgEl1 = document.querySelectorAll('.right-img')
const tuijianneirongEl = document.querySelectorAll('.tuijianneirong-div1')
const youxiadivEl = document.querySelector('.youxia-div')
const cententTopA1El = document.querySelector('.centent-topa1')
const cententTopA2El = document.querySelector('.centent-topa2')
const chufaEl = document.querySelector('.chufaa')
chufaEl.style.color = '#333'
var lastScrollY = window.scrollY;
var scrollTimer = null;
var scrollDifference = 0;
var sum1 = 0;

// 顶部导航条搜索框样式变换
inputEl.addEventListener('focus', function () {
    const inputDiv2El = inputDivEl.querySelector('div')
    inputDiv2El.style.backgroundColor = '#1e80ff11'
    inputDiv2El.style.color = '#1e80ff'
    buttonEl1.style.display = 'none';
    inputDivEl.style.border = '1px solid #007fff'
})
document.addEventListener('click', function (event) {
    if (!inputEl.contains(event.target)) {
        const inputDiv2El = inputDivEl.querySelector('div')
        inputDiv2El.style.backgroundColor = ''
        inputDiv2El.style.color = ''
        buttonEl1.style.display = '';
        inputDivEl.style.width = '';
        inputEl.style.width = '';
        inputDivEl.style.border = '';
    }
});
// 顶部导航条隐藏
function throttledScrollHandler() {
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    var currentScrollY = window.scrollY;
    var scrollDifference = Math.ceil(currentScrollY - lastScrollY);
    var chazhi = Math.abs(scrollDifference);
    if (scrollDifference > 0) {
        if (currentScrollY >= 700 || chazhi > 600) {
            navEl.style.display = 'none';
            leftInEl.style.top = '20px';
        }
    } else {
        if (window.scrollY < 200 || chazhi > 600) {
            navEl.style.display = '';
            leftInEl.style.top = '';
        }
    }
    scrollTimer = setTimeout(function () {
        if (chazhi > 600) {
            lastScrollY = currentScrollY;
        }
    }, 300);
}
document.addEventListener('scroll', throttledScrollHandler);

// 左侧a链接visited效果
Array.prototype.forEach.call(leftaEl, (e1) => {
    e1.addEventListener('click', function () {
        leftaEl.forEach((e2) => {
            e2.className = ''
        })
        e1.className = 'abianhuan'
    })

})

// 中间内容小圆点变换函数
function bindEventListeners() {
    const cententneirongdivEl = document.querySelectorAll('.centent-neirongdiv');
    Array.prototype.forEach.call(cententneirongdivEl, (e1) => {
        e1.addEventListener('mouseover', () => {
            const spanEl1 = e1.querySelector('.cententspan2');
            if (spanEl1) {
                spanEl1.style.display = 'inline';
            }
        });
        e1.addEventListener('mouseout', () => {
            const spanEl1 = e1.querySelector('.cententspan2');
            if (spanEl1) {
                spanEl1.style.display = 'none';
            }
        });
    });

    const cententa1allEl = document.querySelectorAll('.cententa3');
    Array.prototype.forEach.call(cententa1allEl, (e1) => {
        e1.addEventListener('mouseover', () => {
            const spanEl1 = e1.querySelector('.iconfont');
            const spanEl2 = e1.querySelector('.num');
            spanEl1.style.color = '#1364ce';
            spanEl2.style.color = '#1364ce';
        });
        e1.addEventListener('mouseout', () => {
            const spanEl1 = e1.querySelector('.iconfont');
            const spanEl2 = e1.querySelector('.num');
            spanEl1.style.color = '';
            spanEl2.style.color = '';
        });
    });
}
// 初始化
bindEventListeners();

// 中间头部推荐最新样式变换
cententTopA1El.addEventListener('click', function () {
    if (!cententTopA1El.classList.contains('chufaa')) {
        cententTopA1El.classList.add('chufaa')
        cententTopA2El.classList.remove('chufaa')
        cententTopA1El.style.color = '#333'
        cententTopA2El.style.color = ''
    }
})
cententTopA2El.addEventListener('click', function () {
    if (!cententTopA2El.classList.contains('chufaa')) {
        cententTopA2El.classList.add('chufaa')
        cententTopA1El.classList.remove('chufaa')
        cententTopA2El.style.color = '#333'
        cententTopA1El.style.color = ''
    }
})

// 中间内容扩展
const cententdivEl = document.querySelector('.centent-neirong')
var cententnei = document.createElement('div');
cententnei.className = 'centent-neirongdiv'
cententnei.innerHTML = `
                    <div class="centent-neirongright">
                        <a href="#">
                            <div class="centent-neirongdiv1">
                                我倒闭 2 年的小网站将重出江湖！
                            </div>
                            <div class="centent-neirongdiv2">
                                这篇文章就简单分享一下当时我开源的面试鸭网站背后的技术，也是我自己很喜欢的一套技术栈，百试不爽，想做个网站的话，非常值得参考。
                            </div>
                        </a>

                        <div class="centent-neirongdiv3">
                            <a href="#" class="cententa cententa1">
                                程序员鱼皮
                            </a>
                            <span class="cententspan">|</span>
                            <a href="#" class="cententa cententa2">
                                <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
                                4.7k
                            </a>
                            <a href="#" class="cententa cententa3">
                                <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
                                <span class="num">44</span>
                            </a>
                            <a href="#"><span class="cententspan2">· · ·</span></a>
                            <a href="#" class="cententa4">前端</a>
                        </div>
                    </div>
                    <a href="#"> <img src="../img/cent2.png" alt="" class="centent-neirongimg"></a>`

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function () {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function () {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    }
}
window.addEventListener('scroll', throttle(function () {
    var scrollTop = window.scrollY;
    var scrollHeight = document.documentElement.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight - 1) {
        console.log("已滚动到页面底部");
        for (let i = 1; i <= 10; i++) {
            const newElement = cententnei.cloneNode(true);
            cententdivEl.appendChild(newElement);
            bindEventListeners();
        }
    }
}, 100));

// 右侧广告内容变换
Array.prototype.forEach.call(imgEl1, (e1) => {
    e1.addEventListener('mouseover', () => {
        const iconEl1 = e1.querySelector('.iconfont');
        if (iconEl1) {
            iconEl1.style.display = 'inline';
        }
    })
    e1.addEventListener('mouseout', () => {
        const iconEl1 = e1.querySelector('.iconfont');
        if (iconEl1) {
            iconEl1.style.display = 'none';
        }
    })
    e1.querySelector('.span123').addEventListener('mouseover', function () {
        this.innerText = '投放广告'
        this.style.width = '60px'
        this.style.backgroundColor = '#00000066'
    })
    e1.querySelector('.span123').addEventListener('mouseout', function () {
        this.innerText = '广告'
        this.style.width = ''
        this.style.backgroundColor = ''
    })

})

// 右侧推荐话题颜色变换
Array.prototype.forEach.call(tuijianneirongEl, (e1) => {
    e1.addEventListener('mouseover', () => {
        const spanEl1 = e1.querySelector('.tuijianneirong-div1-span1')
        spanEl1.style.color = '#1e80ff'
    })
    e1.addEventListener('mouseout', () => {
        const spanEl1 = e1.querySelector('.tuijianneirong-div1-span1')
        spanEl1.style.color = ''
    })
})

// 右侧作者榜和文章榜变换
document.addEventListener('scroll', function () {
    const wenzhangbangEl = document.querySelector('.wenzhangbang');
    const zuozhebangEl = document.querySelector('.zuozhebang')
    if (window.scrollY >= 2100) {
        if (navEl.style.display == 'none') {
            wenzhangbangEl.style.position = 'fixed'
            wenzhangbangEl.style.top = '0px'
            zuozhebangEl.style.position = 'fixed'
            zuozhebangEl.style.top = '320px'
        } else {
            wenzhangbangEl.style.position = 'fixed'
            wenzhangbangEl.style.top = '60px'
            zuozhebangEl.style.position = 'fixed'
            zuozhebangEl.style.top = '380px'
        }

    } else {
        wenzhangbangEl.style.position = ''
        wenzhangbangEl.style.top = ''
        zuozhebangEl.style.position = ''
        zuozhebangEl.style.top = ''
    }
})

var youxiabotton = document.createElement('div');
youxiabotton.className = 'youxia-out3 youxia-out'
youxiabotton.innerHTML = '<button class="youxia2 youxia"><span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span></button>'

// 右下角小浮标变换
window.addEventListener('scroll', function () {
    if (window.scrollY >= 900) {
        if (!youxiadivEl.contains(youxiabotton))
            youxiadivEl.appendChild(youxiabotton);

    } else {
        if (youxiadivEl.contains(youxiabotton))
            youxiadivEl.removeChild(youxiabotton);
    }
})
// 右下角最下浮标点击回归顶部
youxiabotton.querySelector('button').addEventListener('click', function () {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});